<template>
  <div class="vertical-toolbar">
    <button v-for="(item, index) in tools" :key="index" class="toolbar-button" @click="handleClick(item.action)" :data-tooltip="item.tooltip">
      <img :src="item.icon" alt="tool icon" />
    </button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

interface ToolItem {
  icon: string;
  action: string;
  tooltip: string; // 添加提示文字字段
}

// 接收工具配置数组
const props = defineProps<{
  tools: ToolItem[];
}>();

// 向父组件触发点击事件
const emit = defineEmits<{
  (e: 'tool-click', action: string): void;
}>();

const handleClick = (action: string) => {
  emit('tool-click', action);
};
</script>

<style scoped>
.vertical-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 20, 40, 0.6);
  //border: 2px solid #00aaff;
  padding: 10px;
  border-radius: 10px;
}

.toolbar-button {
  position: relative; /* 为伪元素定位做准备 */
  width: 48px;
  height: 48px;
  margin: 8px 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toolbar-button:hover {
  background: rgba(0, 170, 255, 0.2);
}

.toolbar-button img {
  width: 24px;
  height: 24px;
}

.toolbar-button:hover {
  background: rgba(0, 170, 255, 0.2);
}

/* Tooltip 样式 */
.toolbar-button::before {
  content: attr(data-tooltip);
  position: absolute;
  right: 100%; /* 紧贴按钮左侧 */
  margin-right: 8px; /* 添加间距 */
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-size: 12px;
  z-index: 100;
  text-align: right;
}

/* 鼠标悬浮时显示 tooltip */
.toolbar-button:hover::before {
  opacity: 1;
}
</style>
